<template>
  <div class="root">
    <!-- 模糊搜索 -->
    <div class="sosuo">
    <span style="float: left; line-height:35px ; ">课程名 :&nbsp;</span>
    <el-input v-model="sosuoinput" placeholder="请输入搜索课程标题" style=" width:400px; float:left;  margin-right: 20px ;  " ></el-input>
    <el-button icon="el-icon-search" circle style="float: left;" @click="Search" ></el-button>
     <!-- 新增按钮 -->
     <el-button type="primary"  style="float: right;" @click="ADDdialogFormVisible = true" >新增信息</el-button>
   </div>
    <div>
     
      
      <!-- 点击按钮后弹框 -->
      <el-dialog title="新增操作" :visible.sync="ADDdialogFormVisible">
        <!-- input框 -->
        <div class="openAddtitle">
          <span>courseName:</span>
        </div>
        <el-input class="openAddinput" v-model="courseName_input" placeholder="请输入内容"></el-input>
        <div class="openAddtitle">
          <span>courseDuration:</span>
        </div>
        <el-input class="openAddinput" v-model="courseDuration_input" placeholder="请输入内容" ></el-input>
        <div class="openAddtitle">
          <span>slidesCount:</span>
        </div>
        <el-input class="openAddinput" v-model="slidesCount_input" placeholder="请输入内容" ></el-input>
        <div class="openAddtitle">
          <span>courseDescription:</span>
        </div>
        <el-input class="openAddinput" v-model="courseDescription_input" placeholder="请输入内容" ></el-input>
        <div class="openAddtitle">
          <span>targetAudience:</span>
        </div>
        <el-input class="openAddinput" v-model="targetAudience_input" placeholder="请输入内容" ></el-input>
        <div class="openAddtitle">
          <span>learningOutcomes:</span>
        </div>
        <el-input class="openAddinput" v-model="learningOutcomes_input" placeholder="请输入内容"></el-input>
        <div class="openAddtitle">
          <span>consultantId:</span>
        </div>
        <el-input class="openAddinput" v-model="consultantId_input" placeholder="请输入内容"></el-input>
        <div class="openAddtitle">
          <span>couesrsPrice:</span>
        </div>
        <el-input class="openAddinput" v-model="couesrsPrice_input" placeholder="请输入内容"></el-input>
        <!-- 取消与保存按钮 -->
        <div slot="footer" style class="dialog-footer">
          <el-button @click="ADDdialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="cousesAdd">保 存</el-button>
        </div>
      </el-dialog>
    </div>

    <div>
      <el-table :data="CoursesListAll" border style="width: 100%">
        <el-table-column fixed prop="courseId" label="course_id" width="120"></el-table-column>
        <el-table-column prop="consultants.consultantPhoto" label="consultant_photo" width="120">
          <template slot-scope="scope">
            <span v-html="showImage(scope.row)"></span>
          </template>
        </el-table-column>

        <el-table-column prop="courseName" label="course_name" width="150"></el-table-column>

        <el-table-column prop="courseDuration" label="course_duration" width="120"></el-table-column>

        <el-table-column prop="slidesCount" label="slides_count" width="120"></el-table-column>

        <el-table-column prop="courseDescription" label="course_description" width="150"></el-table-column>

        <el-table-column prop="targetAudience" label="target_audience" width="150"></el-table-column>

        <el-table-column prop="categoryId" label="category_id" width="120"></el-table-column>

        <el-table-column prop="learningOutcomes" label="learning_outcomes" width="120"></el-table-column>

        <el-table-column prop="readCount" label="read_count" width="120"></el-table-column>

        <el-table-column prop="consultantId" label="consultant_id" width="120"></el-table-column>

        <el-table-column prop="courseRatings" label="course_ratings" width="120"></el-table-column>

        <el-table-column prop="isDeleted" label="is_deleted" width="120"></el-table-column>

        <el-table-column prop="price" label="price" width="120"></el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button @click="UpdateShuju(scope.row)" type="text" size="small">修改</el-button>
            <el-button @click="openDelete(scope.row)" type="text" size="small">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 修改操作弹窗 -->
    <el-dialog title="修改操作" :visible.sync="UpdatedialogFormVisible">
      <div class="openAddtitle">
        <span>courseName:</span>
      </div>
      <el-input class="openAddinput" v-model="courseName_input" placeholder="请输入内容"></el-input>
      <div class="openAddtitle">
        <span>courseDuration:</span>
      </div>
      <el-input class="openAddinput" v-model="courseDuration_input" placeholder="请输入内容"></el-input>
      <div class="openAddtitle">
        <span>slidesCount:</span>
      </div>
      <el-input class="openAddinput" v-model="slidesCount_input" placeholder="请输入内容"></el-input>
      <div class="openAddtitle">
        <span>courseDescription:</span>
      </div>
      <el-input class="openAddinput" v-model="courseDescription_input" placeholder="请输入内容"></el-input>
      <div class="openAddtitle">
        <span>targetAudience:</span>
      </div>
      <el-input class="openAddinput" v-model="targetAudience_input" placeholder="请输入内容"></el-input>
      <div class="openAddtitle">
        <span>learningOutcomes:</span>
      </div>
      <el-input class="openAddinput" v-model="learningOutcomes_input" placeholder="请输入内容"></el-input>
      <div class="openAddtitle">
        <span>consultantId:</span>
      </div>
      <el-input class="openAddinput" v-model="consultantId_input" placeholder="请输入内容"></el-input>
      <div class="openAddtitle">
        <span>couesrsPrice:</span>
      </div>
      <el-input class="openAddinput" v-model="couesrsPrice_input" placeholder="请输入内容" type="text"></el-input>
      <div slot="footer" style class="dialog-footer">
        <el-button @click="UpdatedialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="ClassUpdate">保 存</el-button>
      </div>
    </el-dialog>

    <!-- root -->
  </div>
</template>

<script>
export default {
  name: "shoucang",

  // ----------methods---------------------------
  methods: {
    // 查询所有展示数据------------------------
    getClassListAll() {
      console.log("getClassListAll 被调用");
    },

    // 修改方法--------------------------------
    ClassUpdate() {
      console.log("点击触发修改-----");
      this.UpdatedialogFormVisible = false
      this.axios
        .post("/Course/JianJieUpdate", {
          course_id:this.course_id_input,
          course_name:this.courseName_input,
          course_duration:this.courseDuration_input,
          slides_count:this.slidesCount_input,
          course_description:this.courseDescription_input,
          target_audience:this.targetAudience_input,
          learning_outcomes:this.learningOutcomes_input,
          consultant_id:this.consultantId_input,
          price:this.couesrsPrice_input
        })
        .then(res => {
          console.log("res.data");
        })
        .catch(err => {
          console.log("错误");
        });
        window.location.reload();
        
    },
    // 删除方法--------------------------------
    ClassDelete(obj) {
      // console.log(obj.consultantId);
      this.ClassID = obj.courseId;
      console.log(this.ClassID);
      // 删除方法网络请求----------------------------------------------------------
      this.axios
        .post("/Course/JianJieDelete", {
          // 传递id
          ClassID: obj.courseId
        })
        .then(res => {
          console.log(res.data);
        })
        .catch(err => {
          console.log("Error");
        });
      console.log("触发删除");
      window.location.reload();
    },
    
    // 点击删除弹框---------------------------
    openDelete(obj) {
      this.$confirm("此操作将删除该行信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(res => {
          // console.log(obj);
          this.ClassDelete(obj);
          this.$message({
            type: "success",
            message: "删除成功!"
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    // 显示图片
    showImage(row) {
      return `<img src="${row.consultants[0].consultantPhoto}" style="width: 100%;">`;
    },
    // 修改 取展示数据
    UpdateShuju(row) {
      console.log("hhh")
      console.log(row);
        this.UpdatedialogFormVisible = true,
        this.course_id_input = row.courseId,
        this.courseName_input = row.courseName,
        this.courseDuration_input = row.courseDuration,
        this.slidesCount_input = row.slidesCount,
        this.courseDescription_input = row.courseDescription,
        this.targetAudience_input = row.targetAudience,
        this.learningOutcomes_input = row.learningOutcomes,
        this.consultantId_input = row.consultantId,
        this.couesrsPrice_input = row.price;
    },
    // 添加
    cousesAdd() {
      this.dialogFormVisible = false;
      console.log("进入cousesAdd方法"),
        this.axios
          .post("/Course/JianJieAdd", {
            course_name: this.courseName_input,
            course_duration: this.courseDuration_input,
            slides_count: this.slidesCount_input,
            course_description: this.courseDescription_input,
            target_audience: this.targetAudience_input,
            learning_outcomes: this.learningOutcomes_input,
            consultant_id: this.consultantId_input,
            price: this.couesrsPrice_input
          })
          .then(res => {
            console.log(res.data);
          })
          .catch(err => {
            console.log("错误");
          });
          window.location.reload();
    },
    // 搜索方法
    Search(){
     console.log("进入搜索方法")
     this.axios.post("/Course/JianJieSearch",{
      course_name:this.sosuoinput,
     }).then(res =>{
      console.log(res.data);
      this.CoursesListAll=res.data.data;
     }).catch(err => {
      console.log("错误");
     });
    //  window.location.reload();
    }
  },

  data() {
    return {
      // 展示页面数据源-------------------------
      CoursesListAll: [],
      // 存储点击对象的id
      ClassID: 0,
      // 添加组件弹框
      ADDdialogTableVisible: false,
      ADDdialogFormVisible: false,
      // 修改组件弹框
      UpdatedialogTableVisible: false,
      UpdatedialogFormVisible: false,
      // 新增/修改操作 中的input 容器
      courseName_input: "",
      courseDuration_input: "",
      slidesCount_input: "",
      courseDescription_input: "",
      targetAudience_input: "",
      learningOutcomes_input: "",
      consultantId_input: "",
      couesrsPrice_input:"",
      course_id_input: "",  //course_id
      // 搜索input
      sosuoinput:"",
    };
  },
  created() {
    //默认请求全部
    this.getClassListAll();
    this.axios
      .post("/Course/JianJieVue", {})
      .then(res => {
        this.CoursesListAll = res.data.data;
      })
      .catch(err => {});
  }
};
</script>

<style>
.openAddtitle {
  /* float: left; */
  height: 40px;
  line-height: 40px;
  margin-right: 10px;
  margin-bottom: 10px;
}
.openAddinput {
  margin-bottom: 10px;
}

.dialog-footer {
  margin-left: 20px;
  
}

.sosuo{
  width: 700px;
  background-color: #ffffff;
 height: 60px;
}
</style>